<template>
	<view class="payment">
		<view class="bg-color" style="width:100%;height:30rpx"></view>
		<!-- 收货地址 -->
		<view class="address flex-row border-radius" style="background-color: #fff;width:100%;height:150rpx">
			<view class="flex-row-ct theme-color margin-lr-com iconfont icon-dingwei1" style="font-size: 25px"></view>
			<view class="flex-column-st">
				<view class="message" type="text">萍乡市安源区萍安北大道112号</view>
				<view class="name" type="text">路易斯 12345678901</view>
			</view>
			<view class="flex-row-ct" style="margin-left: auto;">
					<view class="flex-row-ct theme-color iconfont icon-you" 
					style="font-size: 20px;margin-left: auto;" @click="toAddress"></view>
			</view>
		</view>
		<!-- 购买商品列表 -->
		<view class="margin-tb-com border-radius" style="background-color: #fff;width: 100%;height: fit-content">
			<view class="goods flex-row" v-for="(item,index) in products.order_list" :key="index" 
			style="width: 100%;">
				<!-- 商品图片 -->
				<view class="margin-com " style="width:30%;height:170rpx;">
					<image :src="item.shopImage" mode="aspectFill" @click="onDetails" 
					class="border-radius" style="width:100%;height:100%;"></image>
				</view>
				<!-- 内容 -->
				<view class="margin-top-com " style="width:40%;height:170rpx;">
					<view class=" " style="font-size: 16px;width:100%;">{{item.shopName}}</view>
					<view class="text-mid margin-top-com" style="font-size: 12px; width:100%">{{item.color}};{{item.size}}</view>
				</view>
				<!-- 价格，数量 -->
				<view class="margin-top-com flex-column-ss margin-right-com" style="width:20%;height:170rpx;">
					<view class="theme-color" style="font-size: 16px;margin-left: auto;">￥{{item.price}}</view>
					<view class="text-mid margin-top-com"
					style="font-size: 12px; margin-left: auto;">×{{item.number}}</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="border-radius" style="background-color: #fff;height:130rpx;width:100%">
			<view class="flex-row-st" style="width:100%;height:100%">
				<view class="margin-left-com" style="font-size: 30rpx;">支付方式</view>
				<view class="margin-right-com iconfont icon-weixin"
				style="margin-left: auto;font-size: 30px;color:#28c445"></view>
				<text class="margin-right-com" style="font-size: 30rpx;">微信支付</text>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<view class="bg-color" style="width:100%;height:130rpx"></view>
		<view class="tabbar flex-row-ct padding-left-com"
		style="position: fixed; bottom: 0;left: 0; right: 0;width:100%;height:60px;
		background-color: #fff;">
			<text style="font-size: 14px;">共{{numselected}}件，</text>
			<text style="font-size: 14px;">合计:</text>
			<view class="account theme-color" style="font-size: 16px;">￥{{totalPrice}}</view>
			<view class="nav" style="margin-left: auto">
				<button class=" theme-bg-color margin-right-com" type="default" size="mini" style="color:#fff;border-radius: 30rpx;" @click="onDetails">提交订单</button>

			</view>
		</view>
	</view>
</template>

<script setup>

import { ref,reactive,computed } from 'vue';
//是否选中
const selected = ref(false)

//test
const selectCartList = ref([])


//商品数量
const numselected = computed(()=>{
		return products.order_list.reduce((sum,item)=>{
		return sum+item.number
	},0)
})

//计算总价
const totalPrice=computed(()=>{
	return products.order_list.reduce((sum,item)=>{
		return sum+item.price*item.number
	},0)
})
// 商品列表
const products = reactive({
  order_list: [{
                    _id: '1',
                    count: 1,
                    shopName: '豹纹毛衣',
					color: '咖色',
					size: 'L',
					number:1,
                    shopTagList: [{
                        _id: '1',
                        category: "复古"
                    }],
                    price: 178,
                    shopImage: "http://47.96.2.66:8085/applet/upload/file/image/shop/cloth.png"
                }, {
                    _id: '2',
                    count: 1,
                    shopName: '小树熊套装',
					color: '黑色',
					size: 'XL',
					number:1,
                    shopTagList: [ {
                        _id: '2',
                        category: "连衣裙"
                    }],
                    price: 39.9,
                    shopImage: "http://47.96.2.66:8085/applet/upload/file/image/shop/paja.png"
                },
				{
				    _id: '3',
				    count: 1,
				    shopName: '奥特曼马甲',
					color: '灰色',
					size: 'M',
					number:1,
				    shopTagList: [{
				        _id: '3',
				        category: "复古"
				    }],
				    price: 60,
				    shopImage: "http://47.96.2.66:8085/applet/upload/file/image/shop/ultrama.png"
				}],
})
//跳转商品详情
const onDetails = () => {
  // uni.navigateTo({
  //   url: '/pages/detail/detail'
  // });
  uni.showToast({
  			title: '功能正在开发中...',
  			icon: 'none',
  			duration: 2000
  		});
}
const toAddress=()=>{
	uni.navigateTo({
	  url: '/pages/shop/address'
	});
}
//
const onclick = () => {
  uni.showToast({
  			title: '功能正在开发中...',
  			icon: 'none',
  			duration: 2000
  		});
}
</script>

<style lang="scss" scoped>
.payment{
  background-color: #efefef;
  height: 100vh;
	//
	.goodsInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #EDEDED;

		&:nth-last-child(1) {
			border: none;
		}

		.checked-image {
			width: 36rpx;
			height: 36rpx;
		}

		.goodsInfo-right {
			width: 634rpx;
			height: 246rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.goods-image {
				width: 180rpx;
				height: 180rpx;
			}

			.goodsInfo-box {
				width: 428rpx;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.goods-name {
					width: 428rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #313133;
				}

				.spe {
					width: 428rpx;
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #919298;
				}

				.goods-box {
					width: 428rpx;
					margin-top: 18rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.goods-num-box {
						width: 168rpx;
						height: 46rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.goods-image {
							width: 46rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							border: 1rpx solid #CFCFCF;
							font-size: 38rpx;
						}

						.goods-num {
							width: 76rpx;
							height: 44rpx;
							text-align: center;
							line-height: 44rpx;
							font-size: 33rpx;
							font-weight: 400;
							color: #666666;
							border-top: 1px solid #CFCFCF;
							border-bottom: 1px solid #CFCFCF;
						}
					}
				}
			}
		}
	}

	.tabbar {
		box-shadow: $uni-shadow-lg;
	}
}
</style>
